<template>
  <div class="app-container" ref="recordTableHeightRef">
    <div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="always">
            <el-form v-model="queryParam" size="mini">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="交易编号：" prop="trNo">
                    <el-input clearable v-model="queryParam.trNo" placeholder="请输入" class="query-form-item"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item></el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="交易时间：" prop="time">
                    <el-date-picker
                      format="yyyy年MM月dd日"
                      value-format="yyyy-MM-dd"
                      v-model="queryParam.trTimeStart"
                      placeholder="选择开始时间"
                      clearable
                      class="query-form-item"
                    ></el-date-picker
                    >-
                    <el-date-picker
                      format="yyyy年MM月dd日"
                      value-format="yyyy-MM-dd"
                      v-model="queryParam.trTimeStart"
                      placeholder="选择结束时间"
                      clearable
                      class="query-form-item"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="searchList" size="mini">查询</el-button>
                  <el-button type="danger" @click="clearQueryParam" size="mini">清除</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" style="min-height: 100%">
          <el-card shadow="always" style="height: 60%">
            <div class="amount">
              <i class="amount-text">余额：</i><i class="amount-number">{{ amount }}</i>
            </div>
          </el-card>
          <el-card shadow="always" style="margin-top: 15px; height: 40%">
            <button-name @click="clickEvent"></button-name>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 10px">
      <el-card shadow="always">
        <el-table :data="tableData" border size="mini" :height="maxHeight">
          <el-table-column align="center" label="序号" type="index" fixed="left" width="55"></el-table-column>
          <el-table-column align="center" label="交易时间" min-width="200" prop="trTime" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="交易编号" min-width="300" prop="trNo" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="金额" min-width="200" prop="trAmount" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="交易主体" min-width="200" prop="trUserCode" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="交易对象" min-width="200" prop="trTarget" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="交易类型" min-width="200" prop="trType" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="交易范围" min-width="200" prop="trScope" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            ref="pagination"
            class="pagination"
            small
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.PageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import buttonName from '@/components/buttonName/button-name'
import transactionRecord from '@/request/cstManagement/TransactionRecord'
import Store from '@/store'

export default {
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      amount: 0, // 余额
      maxHeight: -1,
      queryParam: {
        trNo: '', // 交易编号,
        trTimeStart: null, // 交易时间开始
        trTimeEnd: null, // 交易时间结束
        trUserCode: Store.state.user.FLT_UUID_DX_H,
        origin: '',
      },
      tableData: [],
    }
  },
  components: {
    'button-name': buttonName,
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.recordTableHeightRef.offsetHeight - 250
    }
  },
  mounted() {
    const role = localStorage.getItem('IS_SHOW1')
    if (role === '6' || role === '3') {
      this.origin = 'dept'
    }
    if (role === '2') {
      this.origin = 'group'
    }
    this.refreshList()
  },
  methods: {
    getList() {
      transactionRecord
        .queryList(
          Object.assign(
            {
              index: this.Pagination.currentPage,
              size: this.Pagination.pageSize,
            },
            this.queryParam
          )
        )
        .then(res => {
          this.amount = res.data.amount
          this.tableData = res.data.list
          this.updatePaginationTotal(res.total)
        })
    },
    clearQueryParam() {
      this.queryParam = {
        trNo: '', // 交易编号,
        trTimeStart: null, // 交易时间开始
        trTimeEnd: null, // 交易时间结束
      }
    },
    clickEvent({ mdlCode }) {},
  },
}
</script>
<style scoped lang="scss">
.app-container {
  height: 100%;
  .query-form-item {
    width: 200px;
  }
  .amount {
    font-size: 20px;
    .amount-text {
      color: black;
    }
    .amount-number {
      color: red;
    }
  }
}
</style>
